<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code-magic</title>
    <script src="vue-2.6.14.js"></script>
    <script src="jquery.min.js"></script>
    <style>
        .dto-item{
            padding: 10px 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <input id="author" name="author" type="text" v-model="message" placeholder="author">
        <input id="authorZh" name="authorZh" type="text" placeholder="author zh">
    </div>

    <h4>=====dto=====</h4>
    <div id="dto-con" class="dto-con">
        <div><input name="remark" type="text"/>请求/返回</div>
        <div>class <input name="className" type="text"/> {</div>
        <div id="dto-items">
            <div class="dto-item">
                <div>
                    @<input name="zj" type="text">
                </div>
                <div>
                    <select name="auth">
                        <option value="private">private</option>
                        <option value="public">public</option>
                    </select>
                    <select name="sx-obj">
                        <option value="String">String</option>
                        <option value="Integer">Integer</option>
                        <option value="Long">Long</option>
                    </select>
                    <input name="sx-objName" type="text"/>
                </div>
                <div>
                    <div>
                        <input name="notNull" type="checkbox"/> <label>notNull</label>
                    </div>
                </div>
            </div>
        </div>
        <button onclick="dtoAddLine()">增加一行</button>
        <div>}</div>
        <div>
            <button onclick="dtoBuild()">构建</button>
        </div>
    </div>

    <pre id="console" class="console">
        {{message}}
    </pre>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>